<template>
  <div class="main">
    <!--假勤余额 -->
    <van-nav-bar right-text="休假记录" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="balance">
      <div class="balance_position balance_style">
        <span style="vertical-align: bottom;">
          <span class="num">20.5</span>
          <span>天</span>
        </span>
      </div>
      <div class="balance_style">假期余额</div>
      <i class="iconfont tea icon-kafeiguan"></i>
    </div>
    <!-- 样式 -->
    <div class="balance_Transverse"></div>
    <!-- 详情 -->
    <div class="balance_details">
      <div v-for="item in balanceList" :key="item.id" :class="{ 'item': item.prompt }">
        <div class="balance_items">
          <div class="balance_item">
            <h4>{{ item.kinds }}</h4>
            <div v-if="!item.prompt">有效期至:{{ item.validityPeriod }}</div>
            <h5>已休:{{ item.retired }}天</h5>
          </div>
          <div class="balance_item right">
            <p>{{ item.balance }}</p>
            <div>余额({{ item.unit }})</div>
          </div>
        </div>
        <span class="prompt" v-if="item.prompt">
          <span>{{ item.prompt }}</span>
          <span class="view">
            去查看
            <van-icon name="arrow" />
          </span>
        </span>
      </div>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item @click="goToApp">
        <template #icon>
          <i class="iconfont icon-naozhong custom_icon"></i>
        </template>
        请假
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router"
const router = useRouter()
const active = ref('0')
const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push('/management')
};

const goToApp = () => {
  router.push('/application')
}

const balanceList = reactive([])
balanceList.push(...[
  {
    id: '32151',
    kinds: '年假',
    validityPeriod: '2024-12-31',
    retired: '3.5',
    prompt: null,
    unit: '天',
    balance: '4.5'
  },
  {
    id: '32151',
    kinds: '病假',
    validityPeriod: '2024-12-31',
    retired: '0',
    prompt: null,
    unit: '天',
    balance: '15'
  },
  {
    id: '32151',
    kinds: '病假',
    validityPeriod: '2024-12-31',
    retired: '0',
    prompt: '4.5小时将于2024-03-31过期',
    unit: '小时',
    balance: '8'
  }
])
</script>

<style lang="scss" scoped>
.main {
  padding-bottom: 40px;
  background-color: $theme_bg;

  .balance {
    position: relative;
    padding: 30px 0 0 50px;
    height: 160px;

    .balance_style {
      color: #fff;
      font-weight: 700;
      margin-bottom: 10px;

      .num {
        font-size: 35px;
        margin-right: 15px;
      }
    }

    .balance_position {
      display: flex;
    }

    .tea {
      position: absolute;
      right: 29px;
      top: 5px;
      font-size: 110px;
      color: #00A795;
    }
  }

  .custom_icon {
    font-size: 22px;
  }

  .balance_Transverse {
    margin: 0 15px;
    height: 14px;
    background-color: #5ACDBE;
    border-radius: 7px;
  }

  .balance_details {
    padding-top: 35px;
    margin: 0 25px;
    box-shadow: 15px 15px 15px -15px #ccc,
      -15px 15px 15px -15px #ccc;
    background-color: #fff;
    transform: translateY(-7px);

    .item {
      padding-bottom: 15px;
    }

    .balance_items {
      border-top: 1px solid #ccc;
      padding: 15px;
      display: flex;
      justify-content: space-between;

      .balance_item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &.right {
          text-align: end;
        }

        div {
          margin: 10px 0;
          font-size: 14px;
          color: #999;
        }

        p {
          color: $theme_icon;
          font-size: 30px;
          font-weight: 700;
        }
      }
    }

    .prompt {
      margin-left: 15px;
      padding: 5px;
      font-size: 12px;
      background-color: #F2F2F2;

      .view {
        margin-left: 15px;
      }
    }
  }
}

:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__text) {
  color: #fff;
}

:deep(.van-hairline--bottom:after) {
  border: 0;
}

:deep(.van-nav-bar) {
  background: transparent;
}
</style>
